<template>
  <div class='issue'>
    <div class='header'>
      <img src="../../../static/index/left.png"
           alt=""
           v-show='catid'
           @click='clearCatid'>
      <span>发布</span>
    </div>
    <!-- 类别列表 -->
    <van-collapse v-model="activeType"
                  accordion
                  v-show='showCatid'>
      <van-collapse-item :title="item.name"
                         :name="idx"
                         v-for='(item,idx) in columns'
                         :key='item.catid'>
        <span v-for='litem in item.child'
              :key='litem.catid'
              @click="handleclick(litem.catid)"
              class='little'>{{litem.name}}</span>
      </van-collapse-item>
    </van-collapse>
    <!-- 区域列表 -->
    <van-collapse v-model="activeArea"
                  accordion
                  v-show='showArea'>
      <van-collapse-item title="选择地区"
                         name="0">
        <span v-for='item in areaList'
              :key='item.catid'
              @click="getAreaId(item.areaid,item.areaname)"
              class='little'>{{item.areaname}}</span>
      </van-collapse-item>
    </van-collapse>
    <!-- 街道列表 -->
    <van-collapse v-model="activeStr"
                  accordion
                  v-show='showStr'>
      <van-collapse-item title="选择街道"
                         name="0">
        <span v-for='item in streetList'
              :key='item.catid'
              @click="getStreetId(item.streetid,item.streetname)"
              class='little'>{{item.streetname}}</span>
      </van-collapse-item>
    </van-collapse>
    <!-- 发布详情 -->
    <!-- <router-view ></router-view> -->
    <child v-if='showDet'
           :catid="catid"
           :areaid='areaid'
           :streetid='streetid'
           :catname='catname'
           :strName='strName'></child>
    <!-- loading -->
    <van-loading size="24px"
                 vertical
                 v-show='isLoading'>加载中...
    </van-loading>
  </div>
</template>

<script>
  import child from './isdetail'
  import {getStore} from '../../config/mUtils'

  export default {
    components: {
      child,
    },
    name: "issue",
    data() {
      return {
        activeType: 0,//手风琴当前激活那个
        activeArea: '0',
        activeStr: "0",
        columns: [],//类别列表
        isLoading: true,//是否架子啊
        catid: '',//类别的id,
        areaid: '',//区域的id
        areaList: [],//区域数组
        streetid: '',//街道id
        streetList: [],//街道列表
        strName: '',
        showStr: false,
        showCatid: true,
        showArea: false,
        showDet: false,
        isLogin: false
      }
    },
    methods: {
      getTypeList() {
        //获取分类
        this.$axios.post('menu/secMenu').then((res) => {
          // 拿到返回值 取消loading
          this.isLoading = false
          this.columns = res.data.data
        })
      },
      handleclick(id) {
        //点击 获取catid
        this.catid = id
        this.showCatid = false
        this.showArea = true
      },
      getAreaList() {
        //选择类别之后  选择区域 获取区域列表
        var params = this.qs.stringify({
          cityid: getStore('cityid')
        })
        this.$axios.post('area/gList', params).then((res) => {
          this.areaList = res.data.data
          // console.log(res.data.data)
        })
      },
      getStreetList() {
        //选择区域后 选择街道 获取街道列表
        var params = this.qs.stringify({
          areaid: this.areaid
        })
        this.$axios.post('street/gList', params).then((res) => {
          this.streetList = res.data.data
        })
      },
      clearCatid() {
        //点击返回
        this.showDet = false
        this.showStr = false
        this.showArea = false
        this.showCatid = true
      },
      getAreaId(id, name) {
        this.areaid = id
        //获取区域id 之后 去获取街道id
        this.getStreetList()
        this.showArea = false
        this.showStr = true
        this.catname = name
      },
      getStreetId(id, name) {

        //街道id
        if ( !this.isLogin ) {
          this.$toast.fail('登录后才可发布信息!')
          return
        } else {
          this.showDet = true
          this.showStr = false
          this.streetid = id
          this.strName = name
        }
      }
    },
    created() {
      this.getTypeList()
      this.getAreaList()
      this.isLogin = !!(getStore("token") || getStore("userName"));
    }
  }
</script>

<style scoped>
  .issue {
    height: auto;
  }

  .issue >>> .van-collapse.van-hairline--top-bottom {
    padding-top: 90px;
  }

  .type .active {
    color: #00b400;
    border-color: #00b400;
  }

  .header {
    background-color: #c30000;
    height: 90px;
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    color: white;
    position: fixed;
    /*top: 50px;*/
    justify-content: center;
    z-index: 88;
  }

  .issue {
    padding-bottom: 100px;
  }

  .header > span {
    font-size: 32px;
  }

  .header > div:first-child {
    display: flex;
    align-items: center;
    position: absolute;
    left: 20px;
    /* width: 3rem */
  }

  .issue >>> .van-loading.van-loading--circular.van-loading--vertical {
    position: absolute;
    left: 45%;
    top: 37%;
  }

  .little {
    margin: 15px 15px;
    display: inline-block;
    color: #333;
    font-size: 24px;
  }

  .issue >>> .van-cell {
    font-weight: 800;
  }

  .header img {
    position: absolute;
    left: 20px;
    width: 48px;
  }

  .issue {
    background-color: #f0f0f0;
  }
</style>
